<template>
    <div class="department_data">
        <div id="department_data" :style="{width: '255px', height: '900px'}"></div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                departmentName: [],
                adopt: [],
                reject: [],
                wait: []
            }
        },
        mounted(){
            this.i_Scroll()
            this.getData()
        },
        methods: {
            i_Scroll(){
                $(".department_data").niceScroll({
                    cursorcolor: "#107da1",
                    cursorborder: "none"
                });
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('department_data'))
                // 绘制图表
                myChart.setOption({
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    // legend: {
                    //     data: ['通过', '待审核','驳回'],
                    //     bottom:"0px",
                    //     textStyle: {
                    //         color: "#fff"
                    //     }
                    // },
                    grid: {
                        top: '0%',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'value',
                        show:false
                    },
                    yAxis: {
                        type: 'category',
                        data: this.departmentName,
                        axisLabel:{
                            color:"#fff",
                            //rotate:"40"
                        }
                    },
                    series: [
                        {
                            name: '通过',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: false,
                                    position: 'insideRight'
                                }
                            },
                            data: this.adopt
                        },
                        {
                            name: '待审核',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: false,
                                    position: 'insideRight'
                                }
                            },
                            data: this.reject
                        },
                        {
                            name: '驳回',
                            type: 'bar',
                            stack: '总量',
                            barCategoryGap:"20%",
                            label: {
                                normal: {
                                    show: false,
                                    position: 'insideRight'
                                }
                            },
                            data: this.wait
                        }
                    ]
                });
            },
            getData(){
                this.$axios.get('http://sdkaohe.cn/api/report/data/sectoralData')
                .then(response=>{
                    let sectoral_data = response.data.data.reverse()
                    for( var i = 0; i < sectoral_data.length; i++){
                        let departmentName = response.data.data[i].departmentName;
                        this.departmentName.push(departmentName)
                        let adopt = response.data.data[i].adopt;
                        this.adopt.push(adopt)
                        let reject = response.data.data[i].reject;
                        this.reject.push(reject)
                        let wait = response.data.data[i].wait;
                        this.wait.push(wait)
                    }
                    this.drawLine()
                })
                .catch(error=>{
                    console.log(error);
                    alert('网络错误，不能访问');
                })
            }
        }
    }
</script>

<style scoped>
    .department_data{
        position: absolute;
        top:360px;
        left: 360px;
        width: 255px;
        height: 440px;
        color: #FFF;
        text-align: left;
    }
</style>